<!-- Single project drawer -->
<nz-drawer
  [nzClosable]="true"
  [nzVisible]="show"
  nzPlacement="right"
  [nzTitle]="memberDrawerTitle"
  [nzContent]="memberDrawerContent"
  (nzOnClose)="closeDrawer()"
  [nzWidth]="900"
></nz-drawer>

<ng-template #memberDrawerTitle>
  <div class="d-flex align-items-center w-100">
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        {{member?.name}}
      </nz-breadcrumb-item>
    </nz-breadcrumb>
    <div class="ms-auto">
      <nz-space>
        <button *nzSpaceItem nz-button nz-dropdown [nzDropdownMenu]="timeSelector"
                      [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
                {{durationLabel}} <span nz-icon [nzType]="'down'"></span>
              </button>
        <button *nzSpaceItem nz-button [nzType]="'primary'" nz-dropdown [nzDropdownMenu]="exportDropdown"
                [nzPlacement]="'bottomRight'" [nzLoading]="exporting">
          导出 <span nz-icon [nzType]="'down'"></span>
        </button>
        <nz-dropdown-menu #exportDropdown="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item (click)="exportTimeLogs()">时间日志</li>
            <li nz-menu-item (click)="exportActivityLogs()">活动日志</li>
            <li nz-menu-item (click)="exportTasks()">任务</li>
          </ul>
        </nz-dropdown-menu>
      </nz-space>
    </div>
  </div>
</ng-template>

<ng-template #memberDrawerContent>
  <ng-container *ngIf="member">
    <nz-tabset nzType="card" [nzSelectedIndex]="selectedTab" (nzSelectedIndexChange)="selectedTabChange($event)">
      <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.label"></nz-tab>
    </nz-tabset>
    <div>
      <ng-container [ngSwitch]="selectedTab">
        <worklenz-rpt-single-member-drawer-overview *ngSwitchCase="0" [isDurationLabelSelected]="isDurationLabelSelected" [isDurationLabelSelected_]="isDurationLabelSelected_" [teamMemberId]="member.id || ''"></worklenz-rpt-single-member-drawer-overview>
        <worklenz-single-member-time-logs *ngSwitchCase="1" [isDurationLabelSelected]="isDurationLabelSelected"  [member]="member"></worklenz-single-member-time-logs>
        <worklenz-single-member-activity-logs *ngSwitchCase="2" [isDurationLabelSelected]="isDurationLabelSelected"  [member]="member"></worklenz-single-member-activity-logs>
        <worklenz-rpt-flat-task-list *ngSwitchCase="3" [isDurationLabelSelected]="isDurationLabelSelected"  [teamMemberId]="member.id || ''" [onlySingleMember]="true"></worklenz-rpt-flat-task-list>
      </ng-container>
    </div>
  </ng-container>
</ng-template>


<nz-dropdown-menu #timeSelector="nzDropdownMenu">
  <ul nz-menu style="max-height: 330px; overflow-y: auto;" nzSelectable>
    <li *ngFor="let item of durations" (click)="onDurationChange(item)"
        [nzSelected]="item.key === selectedDuration?.key && !dateRange.length" nz-menu-item>
      {{item.label}} <small class="ms-auto text-secondary"> {{item.dates}}</small>
    </li>
    <li nz-menu-divider></li>
    <li class="px-2 pb-2 pt-2 mt-1 custom-dropdown-range-li">
      <form nz-form>
        <label>自定义范围</label>
        <div class="d-block mt-1">
          <nz-range-picker [(ngModel)]="dateRange" [ngModelOptions]="{standalone: true}"
                           class="w-100"></nz-range-picker>
        </div>
        <button class="mt-2 ms-auto d-block" nz-button [nzType]="'primary'" [nzSize]="'small'"
                (click)="customDateChange()">
          筛选
        </button>
      </form>
    </li>
  </ul>
</nz-dropdown-menu>
